<template>
    <a-layout style="width: 100%; height: 100%; background: #fff">
        <a-layout-header style="background: #fff; display: flex; justify-content: space-between; padding: 0">
            <div class="title" style="width: 200px">绑定价签</div>
            <div class="title" style="flex: 1; text-align: center">
                使用模板
                <a-select v-model:value="templateCode" style="width: 200px" @change="changTemplateCode">
                    <a-select-option :value="item.templateCode" v-for="(item, index) in tmpList" :key="index">{{
                        item.templateName
                    }}</a-select-option>
                </a-select>
            </div>
            <div class="title" style="width: 200px; text-align: right">
                <a-button type="primary" @click="cancelFun">取消</a-button>
                <a-button type="primary" @click="confirmFun">确认</a-button>
            </div>
        </a-layout-header>
        <a-layout>
            <a-layout-sider class="dev-sider">
                <div class="devInfo">
                    <div class="devInfo-title">设备信息</div>
                    <div class="devInfo-box">
                        <span>设备编号</span><span>{{ deviceCode }}</span>
                    </div>
                    <div class="devInfo-box">
                        <span>价签型号</span><span>{{ specsCode }}</span>
                    </div>
                    <div class="devInfo-box">
                        <span>支持颜色</span><span>{{ tagColourName }}</span>
                    </div>
                    <div class="devInfo-box">
                        <span>分辨率</span><span>{{ tagRatioName }}</span>
                    </div>
                    <div class="devInfo-box">
                        <span>是否带灯</span><span>{{ priceIsLight ? '是' : '否' }}</span>
                    </div>
                    <div class="devInfo-box">
                        <span>是否防水</span><span>{{ priceIsWater ? '是' : '否' }}</span>
                    </div>
                </div>
            </a-layout-sider>
            <a-layout-content style="background: #fff"
                ><div class="bing-main">
                    <div
                        v-for="(item, index) in goodList"
                        :key="index"
                        :style="{
                            height: item.note.height * zoomValue + 'px',
                            width: item.note.width * zoomValue + 'px',
                            top: item.note.top * zoomValue + 'px',
                            left: item.note.left * zoomValue + 'px',
                        }"
                        class="bing-box"
                    >
                        <img style="width: 100%; height: 100%" :src="item.imageUrl" alt="" />
                        <div class="bingBg" v-if="bgIndex !== index" @click.stop="bgIndex = index"></div>

                        <div class="bing-box-index" :class="bgIndex == index ? 'bing-box-index-active' : ''">
                            {{ item.serial + 1 }}
                        </div>
                    </div>
                </div></a-layout-content
            >
            <a-layout-sider class="dev-sider">
                <div class="devInfo">
                    <div class="devInfo-title">商品信息</div>
                    <div id="mytb">
                        <div class="dev-good" :class="item.name ? 'devItem' : ''" v-for="(item, index) in goodList" :key="index">
                            <div class="dev-good-index" :class="bgIndex == index ? 'dev-good-index-active' : ''">
                                {{ item.serial + 1 }}
                            </div>
                            <div class="dev-good-item1" draggable="true" v-if="!item.name" @click="addGood(item)">
                                <PlusOutlined />
                            </div>
                            <div
                                class="dev-good-item move"
                                :data-id="index"
                                :class="item.name ? 'dev-good-item-lh' : ''"
                                v-if="item.name"
                            >
                                <span class="good-del" @click="handleDel(index, item)"><DeleteOutlined /></span>
                                <div class="dev-good-item-text">
                                    <span> 条形码</span>
                                    <span> {{ item.skuCode }}</span>
                                </div>
                                <div class="dev-good-item-text">
                                    <span> 商品名称</span>
                                    <span> {{ item.name }}</span>
                                </div>
                                <div class="dev-good-item-text" style="border: none">
                                    <span> 所属分类</span>
                                    <span> {{ item.skuSpecsName }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a-layout-sider>
        </a-layout>
        <good-model
            :visible="goodVisible"
            :loading="goodLoading"
            :title="title"
            @cancle="handleGoodCancle"
            @submit="handleGoodSubmit"
        ></good-model>
    </a-layout>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';
import goodModel from './goodModel.vue';
import { getAppsInfo, AppPreviewBindingImage, getAppsTemplate, postAppsActivation } from '@/api/device/deviceApps';
import { getskuGoodsSku } from '@/api/goods';
import { message } from 'ant-design-vue';
import { PaginationQuery, Pagination } from '@/types/table';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import Sortable from 'sortablejs';
interface DeptState {
    deviceCode: string;
    specsCode: string | number;
    id: string | number;
    nfcCode: string | number;
}

// 表单校验规则
const initRules = (t: fn) => {
    return {
        deviceCode: [{ required: true, message: t('yl.inputNameStand'), trigger: 'blur' }],
        precinct: [{ required: true, message: t('yl.bindingJqArea'), trigger: 'blur' }],
    };
};

export default defineComponent({
    name: 'roleModel',
    components: {
        goodModel,
        PlusOutlined,
        DeleteOutlined,
    },
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        title: {
            type: String,
        },
        deviceCode: {
            type: String,
            default: () => '',
        },
        specsCode: {
            type: String,
            default: () => '',
        },
        priceIsLight: {
            type: Boolean,
            default: () => false,
        },
        priceIsWater: {
            type: Boolean,
            default: () => false,
        },
        tagColourName: {
            type: String,
            default: () => '',
        },
        tagRatioName: {
            type: String,
            default: () => '',
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();

        const state = reactive({
            deviceCode: props.deviceCode,
            specsCode: props.specsCode,
            priceIsLight: props.priceIsLight,
            priceIsWater: props.priceIsWater,
            tagColourName: props.tagColourName,
            tagRatioName: props.tagRatioName,
        });
        const goodState = reactive({
            goodVisible: false,
            title: '添加商品',
            goodLoading: false,
        });
        const goodList: any = ref([]);
        const zoomValue = ref(1);
        const goodItem = ref({});
        const bgIndex = ref(0);
        const contentList = ref({});
        const tmpList: any = ref([]);
        const templateCode = ref('');
        onMounted(() => {
            iniListData();
            initTmpFun();
            initSortable();
        });
        const iniListData = () => {
            getAppsInfo({ deviceCode: state.deviceCode }).then((res) => {
                console.log(res);
                let goodsItems = res.content.templateItems[0].goodsItems;
                contentList.value = res.content;
                templateCode.value = contentList.value.templateItems[0].templateCode;
                goodsItems.forEach((item: any) => {
                    item.note = JSON.parse(item.note);
                });
                console.log(goodsItems);
                goodList.value = goodsItems;
            });
        };
        const initTmpFun = async () => {
            const { content } = await getAppsTemplate({ deviceCode: state.deviceCode });
            tmpList.value = content;
        };
        const initSortable = () => {
            const mytb = document.querySelector('#mytb');
            new Sortable(mytb, {
                draggable: '.devItem',
                handle: '.move',
                animation: 1000,
                sort: true,
                group: 'it',
                async onEnd({ newIndex, oldIndex }) {
                    const list = goodList.value;
                    const source = JSON.parse(JSON.stringify(goodList.value[oldIndex])); // 谁
                    const destination = JSON.parse(JSON.stringify(goodList.value[newIndex])); // 移动到哪儿
                    list[oldIndex].imageUrl = destination.imageUrl;
                    list[oldIndex].serial = destination.serial;
                    list[oldIndex].skuSpecsName = destination.skuSpecsName;
                    list[oldIndex].skuCode = destination.skuCode;
                    list[oldIndex].skuSpecsId = destination.skuSpecsId;

                    list[oldIndex].name = destination.name;
                    list[oldIndex].id = destination.id;

                    list[newIndex].serial = source.serial;
                    list[newIndex].imageUrl = source.imageUrl;
                    list[newIndex].skuSpecsName = source.skuSpecsName;
                    list[newIndex].skuCode = source.skuCode;
                    list[newIndex].skuSpecsId = source.skuSpecsId;

                    list[newIndex].name = source.name;

                    list[newIndex].id = source.id;
                },
            });
        };
        const handleDel = (index: number, item: any) => {
            item.skuCode = '';
            item.skuSpecsName = '';
            item.name = '';
            item.imageUrl = '';
            item.id = '';
            bgIndex.value = index;
        };
        const addGood = (item: any) => {
            goodItem.value = item;
            goodState.goodVisible = true;
        };
        const handleGoodSubmit = (item: any) => {
            goodItem.value.id = item.goodsId;
            goodItem.value.skuCode = item.skuCode;
            goodItem.value.name = item.name;
            goodItem.value.skuSpecsId = item.skuSpecsId;
            goodItem.value.skuSpecsName = item.skuSpecsName;

            let data = {
                goodsId: item.goodsId,
                height: goodItem.value.note.height,
                templateCommonId: goodItem.value.templateCommonId,
                width: goodItem.value.note.width,
            };
            AppPreviewBindingImage(data).then((res) => {
                goodItem.value.imageUrl = res.content;
                // goodItem.value.imageUrl = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
            });

            goodState.goodVisible = false;
        };

        const confirmFun = () => {
            console.log(goodList.value);
            console.log(contentList.value);
            for (let i = 0; i < goodList.value.length; i++) {
                if (!goodList.value[i].name) {
                    message.info('商品信息不能为空');
                    return;
                }
            }
            let data = {
                // 当前设备
                deviceCode: contentList.value.deviceCode,
                precinct: contentList.value.nowPrecinct,
                templateItems: [
                    {
                        items: goodList.value.map((item) => {
                            return { goodsId: item.id, imageUrl: item.imageUrl, templateCommonId: item.templateCommonId };
                        }),
                        templateCode: contentList.value.templateItems[0].templateCode,
                    },
                ],
            };

            postAppsActivation(data).then((res) => {
                return emit('submit', 'submit');
            });
        };
        const changTemplateCode = (val: any) => {
            tmpList.value.forEach((item: any) => {
                if (item.templateCode == val) {
                    let templateItems = contentList.value.templateItems[0];
                    console.log(item.templateCommon);
                    templateItems.commonNumber = item.commonNumber;
                    templateItems.goodsItems = item.templateCommon.map((item1: any) => {
                        return {
                            bargainPrice: null,
                            commonPrice: null,
                            content: item1.content,
                            id: null,
                            imageUrl: '',
                            marketPrice: null,
                            memberPrice: null,
                            name: '',
                            note: JSON.parse(item1.note),
                            serial: item1.serial,
                            skuCode: '',
                            skuSpecsId: '',
                            skuSpecsName: '',
                            templateCommonId: item1.templateCommonId,
                        };
                    });
                    templateItems.id = item.id;
                    templateItems.showWay = item.showWay;
                    templateItems.splitStyle = item.splitStyle;
                    templateItems.supportLanguage = item.supportLanguage;
                    templateItems.templateCode = item.templateCode;
                    templateItems.templateName = item.templateName;
                    templateItems.templateType = item.templateType;
                    goodList.value = templateItems.goodsItems;
                }
            });
        };
        const handleGoodCancle = () => {
            goodState.goodVisible = false;
        };
        const cancelFun = () => {
            return emit('submit', 'cancel');
        };
        return {
            iniListData,
            ...toRefs(state),
            ...toRefs(goodState),
            goodList,
            zoomValue,
            initSortable,
            handleDel,
            goodItem,
            addGood,
            handleGoodSubmit,
            bgIndex,
            confirmFun,
            contentList,
            tmpList,
            initTmpFun,
            templateCode,
            changTemplateCode,
            handleGoodCancle,
            cancelFun,
        };
    },
});
</script>
<style lang="scss">
.binding {
    width: 100%;
}
.devInfo {
    width: 280px;
    border: 1px solid #e9e9e9;
    background: #f9f9f9;
    border-radius: 5px;
    padding: 15px;
    .devInfo-title {
        font-size: 14px;
        font-weight: bold;
    }
    .devInfo-box {
        background: #fff;
        padding: 5px 5px;
        border: 1px solid #e9e9e9;
        border-radius: 5px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }
    .dev-good {
        display: flex;
        align-items: center;
        margin-top: 15px;
        .dev-good-item,
        .dev-good-item1 {
            width: 215px;
            height: 100px;
            line-height: 100px;
            border: 1px solid #e9e9e9;
            text-align: center;
            background: #fff;
            border-radius: 5px;
            position: relative;

            .anticon {
                font-size: 20px;
                cursor: pointer;
            }
            .dev-good-item-text {
                width: 95%;
                border-bottom: 1px solid #e9e9e9;
                margin: 0 auto;
                padding: 6px;
                display: flex;
                justify-content: space-between;
            }
            .good-del {
                position: absolute;
                top: -15px;
                right: -10px;
                background: #ff8e43;
                color: #fff;
                border-radius: 100%;
                padding: 4px 6px;
                cursor: pointer;
                display: block;
                .anticon {
                    font-size: 16px;
                }
            }
        }
        .dev-good-item-lh {
            line-height: 20px;
        }
        .dev-good-index {
            width: 30px;
            height: 30px;
            border-radius: 30px;
            background: #d2d2d2;
            margin-right: 5px;
            text-align: center;
            line-height: 30px;
        }
        .dev-good-index-active {
            background: #ff8e43;
            color: #fff;
        }
    }
}
.dev-sider {
    width: 280px !important;
    flex: 0 0 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    background: #fff !important;
}
.bing-main {
    width: 640px;
    height: 380px;
    border: 1px solid #ccc;
    margin: 0px auto;
    position: relative;
    overflow: auto;
    .bing-box {
        position: absolute;
        border: 1px solid #ccc;
        background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 0) 0 0/30px 30px,
            linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 0) 0 0/30px 30px;
        .bingBg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #06060657;
            z-index: 99;
            cursor: pointer;
        }
        .bing-box-index {
            position: absolute;
            top: 0px;
            left: 5px;
            width: 30px;
            height: 30px;
            background: #fff;
            border-radius: 100%;
            text-align: center;
            line-height: 30px;
            z-index: 999;
            font-size: 20px;
        }
        .bing-box-index-active {
            background: #ff8e43;
            color: #fff;
        }
    }
}
</style>
